<template>
  <div class="infobox1">
    <div class="mainBlock">
      <div class="block1 flex aitems sb" @click="handleExpand('foundation')">
        <div class="info1">{{ menuList.foundation.name }}</div>
        <div
          :class="'info2 ' + (menuList.foundation.isExpand ? '' : 'rotate180')"
        >
          <i class="el-icon-arrow-up"></i>
        </div>
      </div>
      <div
        class="block2_1 block2 flex aitems"
        :style="menuList.foundation.isExpand ? '' : 'height:0;'"
      >
        <div
          class="info1"
          v-for="(item, index, key) in menuList.foundation.list"
          :key="key"
          @mousedown="handlemousedown(item, index, $event)"
        >
          <img :src="item.icon" class="icon" alt="" />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="mainBlock">
      <div class="block1 flex aitems sb" @click="handleExpand('senior')">
        <div class="info1">{{ menuList.senior.name }}</div>
        <div
          class="info2"
          :style="menuList.senior.isExpand ? '' : 'transform: rotate(180deg);'"
        >
          <i class="el-icon-arrow-up"></i>
        </div>
      </div>
      <div
        class="block2_2 block2 flex aitems"
        :style="menuList.senior.isExpand ? '' : 'height:0;'"
      >
        <div
          class="info1"
          v-for="(item, index, key) in menuList.senior.list"
          :key="key"
          @mousedown="handlemousedown(item, index, $event)"
        >
          <img :src="item.icon" class="icon" alt="" />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="mainBlock">
      <div class="block1 flex aitems sb" @click="handleExpand('promotion')">
        <div class="info1">{{ menuList.promotion.name }}</div>
        <div
          class="info2"
          :style="
            menuList.promotion.isExpand ? '' : 'transform: rotate(180deg);'
          "
        >
          <i class="el-icon-arrow-up"></i>
        </div>
      </div>
      <div
        class="block2_3 block2 flex aitems"
        :style="menuList.promotion.isExpand ? '' : 'height:0;'"
      >
        <div
          class="info1"
          v-for="(item, index, key) in menuList.promotion.list"
          :key="key"
          @mousedown="handlemousedown(item, index, $event)"
        >
          <img :src="item.icon" class="icon" alt="" />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="mainBlock">
      <div class="block1 flex aitems sb" @click="handleExpand('content')">
        <div class="info1">{{ menuList.content.name }}</div>
        <div
          class="info2"
          :style="menuList.content.isExpand ? '' : 'transform: rotate(180deg);'"
        >
          <i class="el-icon-arrow-up"></i>
        </div>
      </div>
      <div
        class="block2_4 block2 flex aitems"
        :style="menuList.content.isExpand ? '' : 'height:0;'"
      >
        <div
          class="info1"
          v-for="(item, index, key) in menuList.content.list"
          :key="key"
          @mousedown="handlemousedown(item, index, $event)"
        >
          <img :src="item.icon" class="icon" alt="" />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { menuList } from "./menuList.js";
import { search } from "../data/search";
import { text } from "../data/text";
import { imgData } from "../data/imgData";
import { titleData } from "../data/titleData";
import { bannerData } from "../data/bannerData";
import { borderData } from "../data/borderData";
import { imgTextNaviData } from "../data/imgTextNaviData";
import { wangeditor } from "../data/wangeditor";
import { videoData } from "../data/video";
import { tabsData } from "../data/tabs";
import { goodsCateData } from "../data/goodsCateData";
import { sellerData } from "../data/sellerData";
import { bulletinData } from "../data/bulletinData";
import { couponData } from "../data/couponData";
import { wenzhangData } from "../data/wenzhangData";
import { spikeData } from "../data/spikeData";
import { zhekouData } from "../data/zhekouData";
import { NyNjData } from "../data/NyNjData";
import { manjianData } from "../data/manjianData";
import { goodsData } from "../data/goodsData";
import { randomLenNum, deepClone } from "@/util/util.js";
export default {
  data() {
    return {
      menuList,
    };
  },
  mounted() {},
  methods: {
    /** 菜单组件展开收缩事件  start**/
    handleExpand(key) {
      this.menuList[key].isExpand = !this.menuList[key].isExpand;
    },
    /** 菜单组件展开收缩事件 end**/

    /**按下组件出现  start**/
    handlemousedown(item, index, e) {
      e.preventDefault();
      this.$parent.$refs.xybox.innerHTML = item.name;
      var e = e || window.event; //要用event这个对象来获取鼠标的位置
      this.x = e.clientX;
      this.y = e.clientY + 10;
      this.$parent.$refs.xybox.style.left = this.x + "px";
      this.$parent.$refs.xybox.style.top = this.y + "px";
      this.$parent.$refs.xybox.style.display = "block";
      this.$store.state.isDrop = true; //设为true表示可以移动

      /**搜索组件 start**/
      if (item.name == "搜索") {
        this.$store.state.currentCom = deepClone(search);
      }
      if (item.name == "文本") {
        this.$store.state.currentCom = deepClone(text);
      }
      if (item.name == "图片") {
        this.$store.state.currentCom = deepClone(imgData);
      }
      if (item.name == "标题栏") {
        this.$store.state.currentCom = deepClone(titleData);
      }
      if (item.name == "轮播图") {
        this.$store.state.currentCom = deepClone(bannerData);
      }
      if (item.name == "分割占位") {
        this.$store.state.currentCom = deepClone(borderData);
      }
      if (item.name == "图文导航") {
        this.$store.state.currentCom = deepClone(imgTextNaviData);
      }
      if (item.name == "富文本") {
        this.$store.state.currentCom = deepClone(wangeditor);
      }
      if (item.name == "视频组件") {
        this.$store.state.currentCom = deepClone(videoData);
      }
      if (item.name == "选项卡") {
        this.$store.state.currentCom = deepClone(tabsData);
      }
      if (item.name == "商品分组") {
        this.$store.state.currentCom = deepClone(goodsCateData);
      }
      if (item.name == "店铺街") {
        this.$store.state.currentCom = deepClone(sellerData);
      }
      if (item.name == "平台公告") {
        this.$store.state.currentCom = deepClone(bulletinData);
      }
      if (item.name == "优惠券") {
        this.$store.state.currentCom = deepClone(couponData);
      }
      if (item.name == "文章") {
        this.$store.state.currentCom = deepClone(wenzhangData);
      }
      if (item.name == "秒杀") {
        this.$store.state.currentCom = deepClone(spikeData);
      }
      if (item.name == "限时折扣") {
        this.$store.state.currentCom = deepClone(zhekouData);
      }
      if (item.name == "N元N件") {
        this.$store.state.currentCom = deepClone(NyNjData);
      }
      if (item.name == "满减活动") {
        this.$store.state.currentCom = deepClone(manjianData);
      }
      if (item.name == "商品") {
        this.$store.state.currentCom = deepClone(goodsData);
      }
      /**搜索组件 end**/
    },
    /**按下组件出现 end**/
  },
};
</script>

<style lang="scss" scoped>
@import "./menuList.scss";
</style>
